<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Wookmark Simple Filtering Example</title>
  <meta name="description" content="Creating a filter with the Wookmark plug-in.">
  <meta name="author" content="Christoph Ono, Sebastian Helzle">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- CSS Reset -->
  <link rel="stylesheet" href="../bower_components/normalize.css/normalize.css">

  <!-- Global CSS for the page and tiles -->
  <link rel="stylesheet" href="../css/main.css">

</head>

<body>

  <div>
    <header>
      <h1>Simple Filtering Wookmark Example</h1>
      <p>
        Click the words below to filter the grid. Grid items that match at least one filter will remain visible.
      </p>
      <p>
        This example only uses jQuery to simplify the toggling of the filter buttons.
      </p>
      <br>
      <p>
        <strong>All filtering examples:</strong>
        <a href="index.html">Simple filtering</a> &mdash;
        <a href="fade.html">Fading effect</a> &mdash;
        <a href="and-filter.html">And-Filter</a> &mdash;
        <a href="only-filter.html">Only-Filter</a>
      </p>
      <br>
      <p><a href="../index.html">Back to overview</a></p>
    </header>

    <!--
      These are our filter options. The "data-filter" classes are used to identify which
      grid items to show.
      -->
    <br/>
    <ol id="filters">
      <li data-filter="all">Reset filters</li>
      <li data-filter="amsterdam">Amsterdam</li>
      <li data-filter="tokyo">Tokyo</li>
      <li data-filter="london">London</li>
      <li data-filter="paris">Paris</li>
      <li data-filter="berlin">Berlin</li>
      <li data-filter="sport">Sport</li>
      <li data-filter="fashion">Fashion</li>
      <li data-filter="video">Video</li>
      <li data-filter="art">Art</li>
    </ol>
    <br/>

    <div role="main">
      <ul id="container" class="tiles-wrap animated">
        <!--
          These are our grid items. Notice how each one has classes assigned that
          are used for filtering. The classes match the "data-filter" properties above.
          -->
        <li data-filter-class='["london", "art"]'>
          <img src="../sample-images/image_1.jpg" height="283" width="200">
          <p>London Art</p>
        </li>
        <li data-filter-class='["berlin", "art"]'>
          <img src="../sample-images/image_2.jpg" height="300" width="200">
          <p>Berlin Art</p>
        </li>
        <li data-filter-class='["berlin", "video"]'>
          <img src="../sample-images/image_3.jpg" height="252" width="200">
          <p>Berlin Video</p>
        </li>
        <li data-filter-class='["tokyo", "fashion"]'>
          <img src="../sample-images/image_4.jpg" height="158" width="200">
          <p>Tokyo Fashion</p>
        </li>
        <li data-filter-class='["berlin", "art"]'>
          <img src="../sample-images/image_5.jpg" height="300" width="200">
          <p>Berlin Art</p>
        </li>
        <li data-filter-class='["tokyo", "fashion"]'>
          <img src="../sample-images/image_6.jpg" height="297" width="200">
          <p>Tokyo Fashion</p>
        </li>
        <li data-filter-class='["london", "art"]'>
          <img src="../sample-images/image_7.jpg" height="200" width="200">
          <p>London Art</p>
        </li>
        <li data-filter-class='["tokyo", "video"]'>
          <img src="../sample-images/image_8.jpg" height="200" width="200">
          <p>Tokyo Video</p>
        </li>
        <li data-filter-class='["tokyo", "art"]'>
          <img src="../sample-images/image_9.jpg" height="398" width="200">
          <p>Tokyo Art</p>
        </li>
        <li data-filter-class='["berlin", "fashion"]'>
          <img src="../sample-images/image_10.jpg" height="267" width="200">
          <p>Berlin Fashion</p>
        </li>
        <li data-filter-class='["amsterdam", "art"]'>
          <img src="../sample-images/image_1.jpg" height="283" width="200">
          <p>Amsterdam Art</p>
        </li>
        <li data-filter-class='["paris", "video"]'>
          <img src="../sample-images/image_2.jpg" height="300" width="200">
          <p>Paris Video</p>
        </li>
        <li data-filter-class='["london", "video"]'>
          <img src="../sample-images/image_3.jpg" height="252" width="200">
          <p>London Video</p>
        </li>
        <li data-filter-class='["london", "video"]'>
          <img src="../sample-images/image_4.jpg" height="158" width="200">
          <p>London Video</p>
        </li>
        <li data-filter-class='["amsterdam"," video"]'>
          <img src="../sample-images/image_5.jpg" height="300" width="200">
          <p>Amsterdam Video</p>
        </li>
        <li data-filter-class='["tokyo", "fashion"]'>
          <img src="../sample-images/image_6.jpg" height="297" width="200">
          <p>Tokyo Fashion</p>
        </li>
        <li data-filter-class='["tokyo", "sport"]'>
          <img src="../sample-images/image_7.jpg" height="200" width="200">
          <p>Tokyo Sport</p>
        </li>
        <li data-filter-class='["berlin", "video"]'>
          <img src="../sample-images/image_8.jpg" height="200" width="200">
          <p>Berlin Video</p>
        </li>
        <li data-filter-class='["amsterdam", "fashion"]'>
          <img src="../sample-images/image_9.jpg" height="398" width="200">
          <p>Amsterdam Fashion</p>
        </li>
        <li data-filter-class='["berlin", "sport"]'>
          <img src="../sample-images/image_10.jpg" height="267" width="200">
          <p>Berlin Sport</p>
        </li>
        <li data-filter-class='["paris", "video"]'>
          <img src="../sample-images/image_1.jpg" height="283" width="200">
          <p>Paris Video</p>
        </li>
        <li data-filter-class='["tokyo", "sport"]'>
          <img src="../sample-images/image_2.jpg" height="300" width="200">
          <p>Tokyo Sport</p>
        </li>
        <li data-filter-class='["amsterdam", "art"]'>
          <img src="../sample-images/image_3.jpg" height="252" width="200">
          <p>Amsterdam Art</p>
        </li>
        <li data-filter-class='["berlin", "sport"]'>
          <img src="../sample-images/image_4.jpg" height="158" width="200">
          <p>Berlin Sport</p>
        </li>
        <li data-filter-class='["paris", "art"]'>
          <img src="../sample-images/image_5.jpg" height="300" width="200">
          <p>Paris Art</p>
        </li>
        <li data-filter-class='["berlin", "art"]'>
          <img src="../sample-images/image_6.jpg" height="297" width="200">
          <p>Berlin Art</p>
        </li>
        <li data-filter-class='["london", "art"]'>
          <img src="../sample-images/image_7.jpg" height="200" width="200">
          <p>London Art</p>
        </li>
        <li data-filter-class='["london", "video"]'>
          <img src="../sample-images/image_8.jpg" height="200" width="200">
          <p>London Video</p>
        </li>
        <li data-filter-class='["london", "video"]'>
          <img src="../sample-images/image_9.jpg" height="398" width="200">
          <p>London Video</p>
        </li>
        <li data-filter-class='["paris", "video"]'>
          <img src="../sample-images/image_10.jpg" height="267" width="200">
          <p>Paris Video</p>
        </li>
        <!-- End of grid blocks -->
      </ul>

    </div>
  </div>

  <!-- include jQuery -->
  <script src="../bower_components/jquery/dist/jquery.min.js"></script>

  <!-- Include the imagesLoaded plug-in -->
  <script src="../bower_components/imagesloaded/imagesloaded.pkgd.min.js"></script>

  <!-- Include the plug-in -->
  <script src="../wookmark.js"></script>

  <!-- Once the page is loaded, initalize the plug-in. -->
  <script type="text/javascript">
    (function($) {
      // Instantiate wookmark after all images have been loaded
      var wookmark;
      imagesLoaded('#container', function() {
        wookmark = new Wookmark('#container', {
          fillEmptySpace: true // Optional, fill the bottom of each column with widths of flexible height
        });
      });

      // Setup filter buttons when jQuery is available
      var $filters = $('#filters li');

      /**
       * When a filter is clicked, toggle it's active state and refresh.
       */
      function onClickFilter(e) {
        var $item = $(e.currentTarget),
            activeFilters = [],
            filterType = $item.data('filter');

        if (filterType === 'all') {
          $filters.removeClass('active');
        } else {
          $item.toggleClass('active');

          // Collect active filter strings
          $filters.filter('.active').each(function() {
            activeFilters.push($(this).data('filter'));
          });
        }

        wookmark.filter(activeFilters, 'or');
      }

      // Capture filter click events.
      $('#filters').on('click.wookmark-filter', 'li', onClickFilter);
    })(jQuery);
  </script>

</body>
</html>
